<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增地址</title>
    <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../font/iconfont.css">
    <script src="../../lib/jquery/jquery-3.6.0.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <style>
        /* * {
            margin: 0;
            padding: 0;
        } */

        body {
            width: 100%;
            background-color: #F2F2F2
        }

        .drop_down {
            width: 255px;
            height: 40px;
            outline: none;
        }

        #head {
            /* width:100% ; */
            margin-top: 50px;
            background-color: white;
        }

        #head>div>div:nth-child(1) {
            margin: 20px 0;
            padding-left: 8%;
            font-size: 20px;
        }

        /* .container {
            width: 1366px;
        } */
        .red {
            text-align: right;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            margin-bottom: 15px;
            /* margin-right: 0; */
        }

        .red>div:nth-child(2) {
            padding-left: 0;
        }

        .red span {
            width: 100%;
            color: red;
            margin-right: 3px;
        }

        .red input {
            display: block;
            width: 100%;
            height: 40px;
            line-height: 40px;
            border: rgb(212, 210, 210) 1px solid;
            opacity: 0.6;
            padding-left: 10px;
        }

        .red textarea {
            display: block;
            min-width: 100%;
            max-width: 100%;
            min-height: 100px;
            max-height: 100px;
            border: rgb(212, 210, 210) 1px solid;
            opacity: 0.6;
            padding-left: 10px;
            position: relative;
        }

        .yibai {
            position: absolute;
            bottom: 0;
            right: 40px;
            font-size: 12px;
            color: rgb(204, 204, 204);
        }

        #head>div:nth-child(1) {
            margin-bottom: 80px;
        }

        #head>div:nth-child(2)>div:nth-child(1) {
            margin-bottom: 0;
        }

        /* 开关 */
        .kaiguan {
            position: relative;
        }

        .icon-anniu_kaiqi {
            font-size: 40px;
            color: #49A2E8;
            position: absolute;
            top: -19px;
            left: -65px;
            /* display: none; */
        }

        .icon-anniu_guanbi {
            font-size: 40px;
            /* color: #49A2E8; */
            position: absolute;
            top: -19px;
            left: -65px;
            display: none;
        }

        .fahuodian {
            font-size: 14px;
            width: 100%;
        }

        button {
            width: 80%;
            font-size: 12px;
            height: 40px;
            line-height: 40px;
            background-color: #0099FF;
            border: rgb(212, 210, 210) 1px solid;
            color: white;
        }

        #head>div:nth-child(4)>div>div:nth-child(1) {
            text-align: right;
        }

        #head>div:nth-child(4)>div>div:nth-child(2)>button {
            background-color: white;
            color: black;
            border: rgb(212, 210, 210) 1px solid;
        }
    </style>
</head>

<body>
    <div id="head" class="container">
        <div class="row">
            <div class="col-xs-12">
                <p>新增地址</p>
            </div>
            <div class="col-md-12 col-xs-24 red">
                <div class="col-md-2 col-xs-4">
                    <span> *</span>地址简称：
                </div>
                <div class="col-md-4 col-xs-8">
                    <input type="text" placeholder="地址简称">
                </div>
            </div>
            <div class="col-md-12 col-xs-24 red">
                <div class="col-md-2 col-xs-4">
                    <span>*</span>联系人：
                </div>
                <div class="col-md-4 col-xs-8">
                    <input type="text" placeholder="收货人姓名">
                </div>
            </div>
            <div class="col-md-12 col-xs-24 red">
                <div class="col-md-2 col-xs-4 ">
                    <span>*</span>手机号：
                </div>
                <div class="col-md-4 col-xs-8">
                    <input type="text" placeholder="11位数字的手机号">
                </div>
            </div>
            <div class="col-md-12 col-xs-24 red">
                <div class="col-md-2 col-xs-4">
                    <span>*</span>地址：
                </div>
                <div class="col-md-4 col-xs-8">
                    <input type="text" placeholder="地址">
                </div>
            </div>
            <div class="col-md-12 col-xs-24 red">
                <div class="col-md-2 col-xs-4">
                    <span>*</span>详细地址:
                </div>
                <div class="col-md-4 col-xs-8">
                    <textarea maxlength="100" placeholder="请输入详细地址"></textarea>
                    <div class="yibai">0/100</div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-xs-24">
                <div class="col-md-2 col-xs-4">
                    <div class="fahuodian">设为发货点：</div>
                </div>
                <div class="col-md-2 col-xs-4 kaiguan">
                    <span class="iconfont icon-anniu_kaiqi"></span>
                    <span class="iconfont icon-anniu_guanbi"></span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-xs-24">
                <div class="col-md-2 col-xs-4">
                    <div class="fahuodian">设为收货点：</div>
                </div>
                <div class="col-md-2 col-xs-4 kaiguan">
                    <span class="iconfont icon-anniu_kaiqi"></span>
                    <span class="iconfont icon-anniu_guanbi"></span>
                </div>
            </div>
        </div>
        <div>
            <div class="col-md-12 col-xs-24">
                <div class="col-md-2 col-xs-4">
                    <button>提交</button>
                </div>
                <div class="col-md-2 col-xs-4">
                    <button>取消</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        // $('#head').css({ height: $(window).height() + 'px' })
        //关闭
        $('.icon-anniu_kaiqi').click(function () {
            $(this).css({ display: 'none' })
            $(this).siblings().css({ display: 'block' })
        })

        $('.icon-anniu_guanbi').click(function () {
            $(this).css({ display: 'none' })
            console.log($('this'))
            $(this).siblings().css({ display: 'block' })
        })
    </script>
</body>

</html>